<!doctype html>
<html>
<head>
<style>
    #content { width: 100%; height: 700px; }
	#sta { perspective: 1024px; position: relative; width: 500px; height: 500px; border: 2px dashed black; margin: 50px auto; }
	#can { transform-style: preserve-3d; position: absolute; padding: 150px 150px;}
	img { position: absolute; perspective-origin: 50% 50%; border: 2px solid red; width: 200px; height: 200px; }
	#i1 { transform: rotateY(   0deg ) translateZ(346.4px); }
	#i2 { transform: rotateY(  60deg ) translateZ(346.4px); }
	#i3 { transform: rotateY( 120deg ) translateZ(346.4px); }
	#i4 { transform: rotateY( 180deg ) translateZ(346.4px); }
    #i5 { transform: rotateY( 240deg ) translateZ(346.4px); }
    #i6 { transform: rotateY( 300deg ) translateZ(346.4px); }
    .button-gup { margin: 20px auto; width: 500px; text-align: center; }
</style>
<script src="jquery-2.2.0.min.js"></script>
<script>
$(function(){

    var init = [ 0, 60, 120, 180, 240, 300 ];
    
    var rotateString = function(deg) {
    
        return 'rotateY(' + deg + 'deg) translateZ(346.4px)';
    };
    
    var hoverModule = (function() {
        
        var timer;
       
        var active = function() {
        
            $("#sta").mouseenter(function(){
                
                timer = timer || setInterval(function() {
                
                    for(var i = 1; i <= init.length; ++i) {
                        
                        init[i - 1] += 2;
                        
                        if(init[i - 1] >= 360) init[i - 1] %= 360;
                    
                        $('#i' + i).css({ 'transform': rotateString(init[i - 1])});
                    }
                   
                }, 33);
            });
        
            $("#sta").mouseleave(function(){
            
                timer = clearInterval(timer);
            });         
        };
        
        var disable = function() {
            
            timer = clearInterval(timer);
        
            $("#sta").unbind('mouseenter');
            
            $("#sta").unbind('mouseleave');
        };
        
        return { active: active, disable: disable };
    })();
    
    var clickModule = (function() {
        
        var timer;
        
        var active = function() {
        
            $('img').click(function() {
                
                var pos = $(this).data('pos'), deg = init[pos], d1 = init[pos], d2 = 360 - init[pos], dir = 0;
                
                timer = clearInterval(timer);
                
                if(d1 > d2) dir = 1; else dir = -1; 
                
                timer = timer || setInterval(function() {
                    
                    if(init[pos] === 0) return timer = clearInterval(timer); 
                    
                    for(var i = 1; i <= init.length; ++i) {
                        
                        init[i - 1] += dir * 3;
                        
                        if(init[i - 1] >= 360) init[i - 1] %= 360;
                    
                        if(init[i - 1] < 0) init[i - 1] = 360 + init[i - 1];
                    
                        $('#i' + i).css({ 'transform': rotateString(init[i - 1])});
                    }      
                    
                }, 11);
            });        
        };
        
        var disable = function() {
            
            timer = clearInterval(timer);
            
            $('img').unbind('click');
        };
        
        return { active: active, disable: disable };
    })();
    
    $('#hover-btn').click(function() {
        
        clickModule.disable();
        
        hoverModule.active();   
    });
    
    $('#click-btn').click(function() {
    
        hoverModule.disable();
    
        clickModule.active();
    });
});
</script>
</head>
<body>
    <div id="content">
        <div id="sta">
            <div id="can">
                <img id="i1" src="h (1).jpg" data-pos="0" />
                <img id="i2" src="h (2).jpg" data-pos="1" />
                <img id="i3" src="h (3).jpg" data-pos="2" />
                <img id="i4" src="h (4).jpg" data-pos="3" />       
                <img id="i5" src="h (5).jpg" data-pos="4" />
                <img id="i6" src="h (6).jpg" data-pos="5" />       
            </div>
        </div>
        <div class="button-gup">
            <button id="hover-btn">悬停旋转</button>
            <button id="click-btn">点击旋转</button>
        </div>
    </div>
</body>
</html>